<template>
  <ContentBox has-corner class="red-property-ratio">
    <ContentBoxTitle title="红色物业托管占比" />
    <div class="red-property-ratio__content">
      <Pie
        :color="['#3BD5B3', '#A177FF']"
        :length="24"
        :length2="12"
        circle1-radius="128"
        circle2-radius="144"
        circle3-radius="160"
        :list="list"
        :canvas-width="360"
        :canvas-height="220"
        pie-radius="50px"
      />
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import Pie from '@/components/Pie/Index.vue'
export default {
  name: 'RedPropertyRatio',
  components: {
    ContentBox,
    ContentBoxTitle,
    Pie
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss">
.red-property-ratio {
  width: $base * 360px;
  height: $base * 230px;
  // margin-top: $base*10px;

  .content-box-title__content {
    width: $base * 300px;
  }

  .red-property-ratio__content {
    margin-top: $base * -45px;
  }
  .pie {
    padding-top: 0;
  }
}
</style>